<template>
  <div class="chat-window">
    <div class="chat-messages" ref="messagesContainer">
      <template v-if="messages.length > 0">
        <message-item
          v-for="(message, index) in messages"
          :key="index"
          :message="message"
          :is-sent="message.fromUserId === currentUserId"
        />
      </template>
      <div v-else class="no-messages">
        暂无消息
      </div>
    </div>
    
    <div class="chat-input">
      <input 
        v-model="messageText" 
        type="text" 
        placeholder="请输入消息..." 
        @keyup.enter="sendMessage"
        :disabled="disabled"
      />
      <div class="emoji-picker-container">
        <button class="emoji-btn" @click="toggleEmojiPicker" :disabled="disabled">😊</button>
        <div v-if="showEmojiPicker" class="emoji-picker-overlay" @click="showEmojiPicker = false"></div>
        <div v-if="showEmojiPicker" class="emoji-picker">
          <Picker :data="emojiData" @select="onEmojiSelect" set="apple" title="选择表情" />
        </div>
      </div>
      <button @click="sendMessage" :disabled="disabled">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onBeforeUnmount } from 'vue';
import MessageItem from './MessageItem.vue';
import { Picker } from 'emoji-mart-vue-fast';
import data from 'emoji-mart-vue-fast/data/all.json';

// Rename the imported data to avoid conflicts
const emojiData = data;

const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  currentUserId: {
    type: Number,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['send']);

const messageText = ref('');
const messagesContainer = ref(null);
const showEmojiPicker = ref(false);
// 移除 EmojiIndex 实例化
// const emojiIndex = new EmojiIndex(data);

// 切换表情选择器显示状态
const toggleEmojiPicker = () => {
  showEmojiPicker.value = !showEmojiPicker.value;
};

// 选择表情时的处理函数
const onEmojiSelect = (emoji) => {
  messageText.value += emoji.native || emoji;
  showEmojiPicker.value = false;
};

// 监听消息变化，自动滚动到底部
watch(() => props.messages.length, () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
    }
  });
});

// 发送消息
const sendMessage = () => {
  if (!messageText.value.trim() || props.disabled) return;
  
  emit('send', messageText.value);
  messageText.value = '';
};

// 在组件销毁前确保关闭表情选择器
onBeforeUnmount(() => {
  showEmojiPicker.value = false;
});

// 添加点击外部关闭表情选择器的功能
const handleClickOutside = (event) => {
  const pickerElement = document.querySelector('.emoji-picker');
  const emojiButton = document.querySelector('.emoji-btn');
  
  if (showEmojiPicker.value && pickerElement && !pickerElement.contains(event.target) && !emojiButton.contains(event.target)) {
    showEmojiPicker.value = false;
  }
};

// 添加全局点击事件监听
watch(showEmojiPicker, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      document.addEventListener('click', handleClickOutside);
    }, 0);
  } else {
    document.removeEventListener('click', handleClickOutside);
  }
});

// 在组件销毁前移除事件监听
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.no-messages {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888;
}

.chat-input {
  padding: 15px;
  border-top: 1px solid #eee;
  display: flex;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 10px;
}

.chat-input button {
  padding: 10px 20px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #1565c0;
}

.chat-input button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.emoji-picker-container {
  position: relative;
  margin-right: 10px;
}

.emoji-btn {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
}

.emoji-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.emoji-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 999;
}

.emoji-picker {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: white;
  border-radius: 8px;
}
</style>